/**
参考网址：https://blog.csdn.net/weixin_46513664/article/details/114396500
openlayers实现动态静态的测距和测面以及删除测距测面和坐标点的功能
*/
<template>
    <div id="map">
        <measureTool v-if="map" :map="map"></measureTool>
    </div>
</template>

<script>
    import "ol/ol.css";
    import { Map, View } from "ol";
    import Tile from "ol/layer/Tile";
    import { XYZ } from "ol/source";
    import { fromLonLat } from "ol/proj";
    import MeasureTool from './MeasureTool.vue'

    export default {
        name: "MeasureToolApp2",
        components: {
            MeasureTool
        },
        data() {
            return {
                map: null,
            };
        },
        methods: {
            /**
             * 初始化一个 openlayers 地图
             */
            initMap() {
                let target = "map"; //跟页面元素的 id 绑定来进行渲染
                let tileLayer = [
                    new Tile({
                        source: new XYZ({
                            url: "https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
                        })
                    })
                ];
                let view = new View({
                    center: fromLonLat([104.912777, 34.730746]), //地图中心坐标
                    zoom: 4.5 //缩放级别
                });
                this.map = new Map({
                    target: target, //绑定dom元素进行渲染
                    layers: tileLayer, //配置地图数据源
                    view: view //配置地图显示的options配置（坐标系，中心点，缩放级别等）
                });
            }
        },
        mounted() {
            this.initMap();
        }
    };
</script>

<style lang="scss" scoped>
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    /*移除OSM的链接*/
    :deep(.ol-attribution) {
        display: none;
    }
</style>